<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from "vue";
import { installationPlan } from "@/api";
import { graphic } from "echarts/core";
import { ElMessage } from "element-plus";

const option = ref({});

const setOption = async () => {
  option.value = {
    legend: {
      top: "top",
      textStyle: {
        color: 'white'
      }
    },
    series: [
      {
        name: "Nightingale Chart",
        type: "pie",
        radius: [50, 90],
        center: ["50%", "50%"],
        roseType: "area",
        itemStyle: {
          borderRadius: 8,
        },
        label: {
          show: true,
          formatter: "{b|{b}} {b|{d}%} \n {c|{c}个}",
          //   position: "outside",
          rich: {
            b: {
              color: "#fff",
              fontSize: 12,
              lineHeight: 26,
            },
            c: {
              color: "#31ABE3",
              fontSize: 12,
            },
            per: {
              color: "#31ABE3",
              fontSize: 12,
            },
          },
        },
        data: [
          { value: 10, name: "普通会员" },
          { value: 8, name: "VIP会员" },
          { value: 4, name: "高级会员" },
        ],
      },
    ],
  };
};
onMounted(() => {
  setOption()
});
</script>

<template>
  <v-chart
    class="chart"
    :option="option"
    v-if="JSON.stringify(option) != '{}'"
  />
</template>

<style scoped lang="scss"></style>
